<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>地址管理</title>
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../css/public.css" media="all">
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
		</div>
	</div>
	
	<script type="text/html" id="addTemplate">
		<form class="layui-form">
			<input type="text" id="name" class="layui-input"/>
			
			<input type="button" class="layui-btn" id="saveBtn" value="保存">
		</form>
	</script>
	
	<!-- 操作列 -->
	<script type="text/html" id="auth-state">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增下级</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['table', 'treetable',"layer"], function () {
			var $ = layui.jquery;
			var table = layui.table;
			var treetable = layui.treetable;
			var layer = layui.layer;
			
			var f1 = function(){
				// 渲染表格
			layer.load(2);
			treetable.render({
				elem: '#munu-table',
				url: '/address/tree',
				treeColIndex: 1,
				treeSpid: 0,
				treeIdName: 'id',
				treePidName: 'parentId',
				page: false,
				cols: [[
					{type: 'numbers'},
					{field: 'name', minWidth: 200, title: '地址名称'},
					{templet: '#auth-state', width: 200, align: 'center', title: '操作'}
				]],
				done: function () {
					layer.closeAll('loading');
				}
			});
			}
			f1();
			table.on('tool(munu-table)',function(obj){
				if(obj.event == "add"){
					layer.open({
						type:1,
						title:"新增下级地址",
						area:['300px','300px'],
						content:$("#addTemplate").html()
					});
					//保存事件
					$("#saveBtn").on("click",function(){
						$.post("/address/save",{name:$("#name").val(),parentId:obj.data.id},function(){
							f1();
							layer.closeAll();
						});
					});
				}
				if(obj.event == "del"){
					layer.confirm("确定要删除此地址吗？",function(){
						
					});
				}
			});
		});
	</script>
</body>

</html>